<script>
export default {
  name: "headAssembly",
  // props中的属性相当于data中的属性
  props:{
    // type1:[String]
    // 可以写多个类型
    // type1:[String,Number,Object]
  //   可以设置默认值
    type1:{
      type:[String,Number],
      // 基本类型
      default:'asd'
    },
    object:{
      type:[Object],
      default:()=>{
        return{
          // 引用类型默认值
          name:'zs'
        }
      }
    }
  },
  // data必须定义为一个方法并返回一个对象的原因：数据隔离
  data(){
    return{
      count:0
    }
  },
  methods:{
    btn(){
      this.count++
    }
  },
  created(){
    console.log(this.type1)
    console.log(this.object)
    // this.type1='123'
  }
}
</script>

<template>
<!--  头部组件-->

<div class="header">header


<!--
  1、插槽：子组件中的提供给父组件使用的一个占位符，用<slot></slot>表示，父组件可以在这个占位符中填充任何模板代码
  2、使用：
       在子组件中使用slot标签
       在父组件的子标签中添加代码，用template标签包裹
  3、插槽分类：
       普通插槽
       具名插槽：<slot name=""></slot>
               使用template标签<template v-slot:footer>
       作用域插槽：将子组件的数据传给父组件使用
-->
  <slot name="course">插槽</slot>
<!--{{count}}-->
  <slot name="footer">插槽2</slot>
<!--  <button @click="btn">点击</button>-->
<!--  <div>-->
<!--    <a-button type="primary" disabled>-->
<!--      Primary-->
<!--    </a-button>-->
<!--    <a-button>Default</a-button>-->
<!--    <a-button type="dashed">-->
<!--      Dashed-->
<!--    </a-button>-->
<!--    <a-button type="danger">-->
<!--      Danger-->
<!--    </a-button>-->
<!--    <a-config-provider :auto-insert-space-in-button="false">-->
<!--      <a-button type="primary">-->
<!--        按钮-->
<!--      </a-button>-->
<!--    </a-config-provider>-->
<!--    <a-button type="primary">-->
<!--      按钮-->
<!--    </a-button>-->
<!--    <a-button type="link">-->
<!--      Link-->
<!--    </a-button>-->
<!--  </div>-->
<!--  <a-icon type="double-left" />-->
</div>
</template>


<style scoped lang="less">
.header{
  height: 350px;
  background-color: aqua;
}
</style>